<template>
  <div class="zuida">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户姓名" prop="name">
    <el-input v-model="ruleForm.name" placeholder="请输入用户姓名"></el-input>
  </el-form-item>
  <el-form-item label="用户头像">
    <el-image 
    style=" height: 100px"
    :src="ruleForm.img" 
    :preview-src-list="[ruleForm.img]">
  </el-image>
  </el-form-item>
  
  <el-form-item label="用户性别" >
    <el-select v-model="ruleForm.sex" placeholder="请选择用户性别">
      <el-option label="帅哥" value="帅哥"></el-option>
      <el-option label="美女" value="美女"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="任职时间" >
    <el-col :span="11">
      <el-form-item prop="date">
        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.date" style="width: 100%;" ></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="教学科目" prop="classroom" >
    <el-input type="textarea" v-model="ruleForm.classroom" resize="none" :rows="1" placeholder="请输入该用户教学的科目"></el-input>
  </el-form-item>
  <el-form-item label="家庭地址" >
    <el-input type="textarea" v-model="ruleForm.address" resize="none" :rows="2" placeholder="请输入该用户家庭地址"></el-input>
  </el-form-item>
  <el-form-item label="联系电话" prop="dianhua">
    <el-input type="textarea" v-model="ruleForm.dianhua" resize="none" :rows="1" placeholder="请输入该用户联系电话"></el-input>
  </el-form-item>
  <el-form-item label="个人简介" >
    <el-input type="textarea" v-model="ruleForm.jianshao" resize="none" :rows="4" placeholder="请输入该用户个人简介"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          sex: '',
          date: '',
          teacher: false,
          jianshao: '',
          address:'',
          dianhua:'',
          classroom:'',
          teacher:'',
          img:"https://p1.ssl.qhimg.com/t01946cc9fb96648eff.png",
          password:"123456"
        },
        rules: {
          name: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          // sex: [
          //   { required: true, message: '请选择用户性别', trigger: 'change' }
          // ],
          // date: [
          //   { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
          // ],
          classroom: [
            { required: true, message: '请填写教学科目', trigger: 'blur' }
          ],
          // address: [
          //   { required: true, message: '请填写家庭地址', trigger: 'blur' }
          // ],
          dianhua: [
            { required: true, message: '请填写联系电话', trigger: 'blur' }
          ],
          // jianshao: [
          //   { required: true, message: '请填写个人简介', trigger: 'blur' }
          // ]
        },
        token:''
      };
    },
    mounted(){
      this.token=localStorage.getItem('token')
      this.$store.commit('isShow')
    },
    methods: {
      request(){
        this.axios.post("/insertteacher",this.ruleForm,
        {headers:{
              'token':this.token
            }}
        ).then((res)=>{
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，新增用户成功!',
          type: 'success'
        });
        this.$router.go(0)
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
           
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉,新增用户失败!',
          type: 'warning'
        });
      })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.request()

          } else {
             this.$message.error('抱歉,新增用户失败,因为部分值为空!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style lang="less" scoped>
  .zuida{
    margin-top: 60px;
    margin-left: 134px;
    width: 50%;
  }
</style>